<template>
    <div class="home">
        home 123
        {{ globalData.token }}

        <Button type="primary" @click="modal = true">{{ $t("message.hello") }}</Button>
        <br>
        <Button type="info" class="mt-4" ghost @click="toExhibition">跳转页面</Button>

        <Modal v-model="modal" title="Common Modal dialog box title" @on-ok="ok" @on-cancel="cancel">
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>
    </div>
</template>
<script setup>
import i18n from '@/i18n/i18n'
import { GlobalStore } from '@/store'
import { Message } from 'view-ui-plus'
import { useStorage } from '@vueuse/core'

//const Route = useRoute()
const Router = useRouter()


//vueUse 缓存
let stateData = useStorage('aaaa', '123', sessionStorage)
//console.log(stateData.value)

let globalData = GlobalStore();

const lang = key => {
    i18n.global.locale = key
    globalData.token = 'lang : ' + key
    sessionStorage.setItem('lang', key)
}

let modal = $ref(false);
const ok = () => {
    $Message.info('Clicked ok')
}
const cancel = () => {
    Message.info('Clicked cancel')
}


const toExhibition = () => {
    console.log(Router)
    Router.push({ name: 'Exhibition' })
}

</script>

<style lang="less" scoped>
.home {
    width: 100vw;
}

span {
    color: @primary-color;
}
</style>